<?php
include $this->admin_tpl('header', 'admin');
?>
<body>
	<div class="fixed-nav layout">
		<ul>
			<li class="first">
				销售统计
				<a id="addHome" title="添加到首页快捷菜单">
					[+]
				</a>
			</li>
			<li class="spacer-gray">
			</li>
			<li>
				<a class="current" href="javascript:;">
				</a>
			</li>
		</ul>
		<div class="hr-gray">
		</div>
	</div>
	<div class="content padding-big have-fixed-nav">
		<table cellpadding="0" cellspacing="0" class="border bg-white layout margin-top">
			<tbody>
				<tr class="bg-gray-white line-height-40 border-bottom">
					<th class="text-left padding-big-left">
						销售概况
					</th>
				</tr>
				<tr class="border">
					<td class="padding-big-left padding-big-right">
						<table cellpadding="0" cellspacing="0" class="layout">
							<tbody>
								<tr class="line-height-40">
									<td class="text-left">
										今日销售额：￥<?php echo sprintf("%.2f",$data['sum'])?>
									</td>
									<td class="text-left">
										人均客单价：￥<?php echo sprintf("%.2f",$data['sum']/$data['member'])?>
									</td>
									<td class="text-left">
										今日订单数：<?php echo (int)$data['order_num']?>
									</td>
									<td class="text-left">
										今日取消订单：<?php echo (int)$data['pass_order_num']?>
									</td>
								</tr>
							</tbody>
						</table>
					</td>
				</tr>
			</tbody>
		</table>
		<table cellpadding="0" cellspacing="0" class="border bg-white layout margin-top">
			<tbody>
				
				<tr class="bg-gray-white line-height-40 border-bottom">
					<th class="text-left padding-big-left">
						销售统计图表
						<div class="count-date fr">
							<a href="javascript:;" class="current" onclick="showchart(6,0,0)">
								最近7天
							</a>
							<a href="javascript:;" onclick="showchart(29,0,0)">
								最近30天
							</a>
							<input type="text" onclick="laydate({istime: true, format: 'YYYY-MM-DD', max: laydate.now()}),laydate.skin('danlan')" tabindex="0" placeholder="YYYY-MM-DD " value="" name="stime" class="input laydate-icon hd-input">
							&emsp; ~&emsp;
							<input type="text" onclick="laydate({istime: true, format: 'YYYY-MM-DD', max: laydate.now()}),laydate.skin('danlan')" tabindex="0" placeholder="YYYY-MM-DD " value="" name="etime" class="input laydate-icon hd-input">
							<input id="submit" class="button bg-main text-normal" type="button" value="确定" />
						</div>
					</th>
				</tr>
				
				<tr>
					<td class="padding">
						<div id="statistics" style="height: 400px;">
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<div class="layout margin-big-top clearfix">
			<div class="fl w50 padding-right">
				<table cellpadding="0" cellspacing="0" class="border bg-white layout">
					<tbody>
						<tr class="bg-gray-white line-height-40 border-bottom">
							<th class="text-left padding-big-left">
								订单地区分部
							</th>
						</tr>
						<tr>
							<td class="padding">
								<div id="area" style="height: 400px;">
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="fl w50 padding-left">
				<table cellpadding="0" cellspacing="0" class="border bg-white layout">
					<tbody>
						<tr class="bg-gray-white line-height-40 border-bottom">
							<th class="text-left padding-big-left">
								支付方式类型统计
							</th>
						</tr>
						<tr>
							<td class="padding">
								<div id="pay" style="height: 400px;">
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="<?php echo __ROOT__;?>statics/js/echarts/dist/echarts.js"></script>
	<script src="<?php echo __ROOT__;?>statics/js/laydate/laydate.js" type="text/javascript"></script>
	<script type="text/javascript">
	var ret ;
	showchart(6,0,0);
	function showchart(days,stime,etime){
	getdata(days,stime,etime);
	// 路径配置
	require.config({
		paths: {
			echarts: '<?php echo __ROOT__;?>statics/js/echarts/dist' //配置路径
		}
	});
	// 使用
	require(
	[
		'echarts',
		'echarts/chart/line', // K线图
		'echarts/chart/map', // 地图
		'echarts/chart/pie' // 饼图
	],DrawEChart);
	function DrawEChart(ec) {
		//销售统计
		myChart = ec.init(document.getElementById('statistics'), 'macarons');
		myChart.setOption({
			/*title : {
			text: '销量',//标题
			subtext: '描述',//文字
			x:'center'//坐标
			},*/
			tooltip: {
				trigger: 'axis'
			},
			legend: {
				data: ['交易金额', '订单数', '客单价']
			},
			toolbox: {
				show: false
			},
			calculable: false,
			xAxis: [{
				type: 'category',
				boundaryGap: false,
				data: ret.sale.xAxis,
			}],
			yAxis: [{
				type: 'value'
			}],
			series: [{
				name: '交易金额',
				type: 'line',
				smooth: true,
				itemStyle: {
					normal: {
						areaStyle: {
							type: 'default'
						}
					}
				},
				data: ret.sale.series[0],
			}, {
				name: '订单数',
				type: 'line',
				smooth: true,
				itemStyle: {
					normal: {
						areaStyle: {
							type: 'default'
						}
					}
				},
				data: ret.sale.series[1]
			}, {
				name: '客单价',
				type: 'line',
				smooth: true,
				itemStyle: {
					normal: {
						areaStyle: {
							type: 'default'
						}
					}
				},
				data: ret.sale.series[2]
			}]
		});
		
		//订单地区分部
		myArea = ec.init(document.getElementById('area'), 'macarons');
		myArea.setOption({
			tooltip: {
				trigger: 'item'
			},
			legend: {
				orient: 'vertical',
				x: 'left',
				data: ['订单数量']
			},
			dataRange: {
				min: 0,
				max: ret.area.max,
				x: 'left',
				y: 'bottom',
				text: ['高', '低'], // 文本，默认为数值文本
				calculable: false
			},
			toolbox: {
				show: false
			},
			series: [{
				name: '订单数量',
				type: 'map',
				mapType: 'china',
				data: [{
					name: '北京',
					value:ret.area.series[0][0]
				}, {
					name: '天津',
					value:ret.area.series[0][1]
				}, {
					name: '河北',
					value:ret.area.series[0][2]
				}, {
					name: '山西',
					value:ret.area.series[0][3]
				}, {
					name: '内蒙古',
					value:ret.area.series[0][4]
				}, {
					name: '辽宁',
					value:ret.area.series[0][5]
				}, {
					name: '吉林',
					value:ret.area.series[0][6]
				}, {
					name: '黑龙江',
					value:ret.area.series[0][7]
				}, {
					name: '上海',
					value:ret.area.series[0][8]
				}, {
					name: '江苏',
					value:ret.area.series[0][9]
				}, {
					name: '浙江',
					value:ret.area.series[0][10]
				}, {
					name: '安徽',
					value:ret.area.series[0][11]
				}, {
					name: '福建',
					value:ret.area.series[0][12]
				}, {
					name: '江西',
					value:ret.area.series[0][13]
				}, {
					name: '山东',
					value:ret.area.series[0][14]
				}, {
					name: '河南',
					value:ret.area.series[0][15]
				}, {
					name: '湖北',
					value:ret.area.series[0][16]
				}, {
					name: '湖南',
					value:ret.area.series[0][17]
				}, {
					name: '广东',
					value:ret.area.series[0][18]
				}, {
					name: '广西',
					value:ret.area.series[0][19]
				}, {
					name: '海南',
					value:ret.area.series[0][20]
				}, {
					name: '重庆',
					value:ret.area.series[0][21]
				}, {
					name: '四川',
					value:ret.area.series[0][22]
				}, {
					name: '贵州',
					value:ret.area.series[0][23]
				}, {
					name: '云南',
					value:ret.area.series[0][24]
				}, {
					name: '西藏',
					value:ret.area.series[0][25]
				}, {
					name: '陕西',
					value:ret.area.series[0][26]
				}, {
					name: '甘肃',
					value:ret.area.series[0][27]
				}, {
					name: '青海',
					value:ret.area.series[0][28]
				}, {
					name: '宁夏',
					value:ret.area.series[0][29]
				}, {
					name: '新疆',
					value:ret.area.series[0][30]
				}, {
					name: '香港',
					value:ret.area.series[0][31]
				}, {
					name: '澳门',
					value:ret.area.series[0][32]
				}, {
					name: '台湾',
					value:ret.area.series[0][33]
				}]
			}]
		});
		//支付方式类型统计
		myPay = ec.init(document.getElementById('pay'), 'macarons');
		myPay.setOption({
			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b} : {c} ({d}%)"
			},
			legend: {
				orient: 'vertical',
				x: 'left',
				data: ['支付宝即时到账', '支付宝担保交易', '支付宝网银直连', '支付宝手机支付', '微信扫码支付', '微信手机支付', '货到付款']
			},
			toolbox: {
				show: false
			},
			calculable: false,
			series: [{
				name: '访问来源',
				type: 'pie',
				radius: ['50%', '70%'],
				itemStyle: {
					normal: {
						label: {
							show: false
						},
						labelLine: {
							show: false
						}
					},
					emphasis: {
						label: {
							show: true,
							position: 'center',
							textStyle: {
								fontSize: '20',
								fontWeight: 'bold'
							}
						}
					}
				},
				data: [{
					value: ret.pay.series['alipay'],
					name: '支付宝即时到账'
				}, {
					value: ret.pay.series['alipay_escow'],
					name: '支付宝担保交易'
				}, {
					value: ret.pay.series['bank'],
					name: '支付宝网银直连'
				}, {
					value: ret.pay.series['ws_wap'],
					name: '支付宝手机支付'
				}, {
					value: ret.pay.series['wechat_qr'],
					name: '微信扫码支付'
				}, {
					value: ret.pay.series['wechat_js'],
					name: '微信手机支付'
				}, {
					value: ret.pay.series['delivery'],
					name: '货到付款'
				}]
			}]
		});
		
	}
	}

	//通过Ajax获取数据
	function getdata(days,stime,etime){
		$.ajax({
			type: "get",
			async: false,
			//同步执行
			url: "<?php echo url('ajax_getdata')?>",
			dataType: "json",
			data:{days:days,stime:stime,etime:etime,formhash:formhash},
			success: function(result) {
				ret = result;
			},
			error: function(errorMsg) {
				alert("不好意思，大爷，图表请求数据失败啦!");
			}
		});
	}
	
	$(function(){
		$('.count-date a').on('click',function(){
			$(this).addClass('current').siblings().removeClass('current');
		})
		$('#submit').on('click',function(){
			var stime = $('input[name="stime"]').val();
			var etime = $('input[name="etime"]').val();
			showchart(0,stime,etime);
			
			
		})
	})
</script>
</body>
</html>
